<template>
	<div>
		<el-card class="!border-none pt-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品信息
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}"> 
				<el-table-column label="总件数" prop="type" align="center" />
				<el-table-column label="总毛重(kg)" prop="上海AAAA有限公司" align="center" />
				<el-table-column label="总体积(CBM)" prop="王小明" align="center" />
				<el-table-column label="总托数" fixed="right" align="center" />
			</el-table>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				结算信息
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">业务编号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">接单日期：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">业务员：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">目的港：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">提单号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">件毛体：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">预计重量：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">预计方数：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">实际进仓重量：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">实际进仓方数：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">单价(USD/吨)：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">进仓费(RMB)：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">USD：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">RMB：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex v-col-center">
						<span class="w-[120px] text-right">备注：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				审核结算
			</div>
			<el-row class="mt-[20px] pb-[20px]" style="border-bottom: 1px solid #F5F5F5;">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">审核：</span>
						<span class="v-wordBreak ml-[10px]">结算</span>
					</div>
				</el-col>
			</el-row>
			<!-- 结算 -->
			<div >
				<el-row class="mt-[20px]">
					<el-col :span="7">
						<div class="main-color v-flex">
							<span class="w-[100px] text-right">结算金额：</span>
							<span class="v-wordBreak ml-[10px]">2579.00</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="7">
						<div class="main-color v-flex v-col-top">
							<span class="w-[100px] text-right">照片：</span>
							<el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 驳回 -->
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">原因：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<!-- end -->
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	const lists = ref<Array<any>>([
		{ type: '出库单' }
	])
</script>

<style>
</style>